<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
    <script>
        window.onload = function () {
            /* 
                1.全选功能
                2.取消
                3.反选
                4.提交
                5.小checkbox和大checkbox同步
            */



            // 获取五个多选框
            const check_boxs = document.getElementsByName("hobby")
            console.log(check_boxs)
            // 全选
            // 获取按钮
            const all_btn = document.getElementById("all")
            console.log(all_btn)
            // 为按钮绑定事件
            all_btn.onclick = function () {
                for (let i = 0; i < check_boxs.length; i++) {
                    check_boxs[i].checked = true;
                }
                check_all_box.checked = true
            }

            // 取消
            const no_btn = document.getElementById("no")
            no_btn.onclick = function () {

                for (let i = 0; i < check_boxs.length; i++) {
                    check_boxs[i].checked = false
                }
                check_all_box.checked = false

            }

            // 反选
            const reverse_btn = document.getElementById("reverse")
            reverse_btn.onclick = function () {

                for (let i = 0; i < check_boxs.length; i++) {
                    check_boxs[i].checked = !check_boxs[i].checked
                }
                //获取选中的checkbox
                const checkedboxs = document.querySelectorAll("[name=hobby]:checked")
                if (checkedboxs.length == check_boxs.length) {
                    check_all_box.checked = true
                }
                else {
                    check_all_box.checked = false
                }
            }
            // 提交
            // 点击提交后，将所选中的内容显示出来
            const send_btn = document.getElementById("send")
            send_btn.onclick = function () {
                for (let i = 0; i < check_boxs.length; i++) {
                    if (check_boxs[i].checked) {
                        alert(check_boxs[i].value)
                    }
                }
            }

            // 全选checkbox发生变化后，将小的checkbox和它同步
            const check_all_box = document.getElementsByName("check-all")[0]
            // console.log(check_all_box)
            check_all_box.onchange = function () {
                // console.log(this)
                //在事件的响应函数中，我们的响应函数绑定给谁，this就是谁（箭头函数除外）
                for (let i = 0; i < check_boxs.length; i++) {
                    check_boxs[i].checked = this.checked
                }
            }
            // 使小的checkbox和大的check-all同步（如果小的5个全选了，大的自动全选，如果5个没全选，则大的也没选中）

            for (let i = 0; i < check_boxs.length; i++) {
                check_boxs[i].onchange = function () {
                    //获取选中的checkbox
                    const checkedboxs = document.querySelectorAll("[name=hobby]:checked")
                    if (checkedboxs.length == check_boxs.length) {
                        check_all_box.checked = true
                    }
                    else {
                        check_all_box.checked = false
                    }
                }
            }
        }
    </script>
</head>

<body>
    <div>
        <form action="#">
            <div>请选择你的爱好：
                <input type="checkbox" name="check-all">全选
            </div>
            <div>
                <input type="checkbox" name="hobby" value="羽毛球">羽毛球
                <input type="checkbox" name="hobby" value="乒乓球">乒乓球
                <input type="checkbox" name="hobby" value="篮球">篮球
                <input type="checkbox" name="hobby" value="网球">网球
                <input type="checkbox" name="hobby" value="足球">足球
            </div>
            <div>
                <button type="button" id="all">全选</button>
                <button type="button" id="no">取消</button>
                <button type="button" id="reverse">反选</button>
                <button type="button" id="send">提交</button>
            </div>
        </form>
    </div>
</body>

</html>